
:root {
    font-size: 32px;
}

body {
    font-family: 'Concert One', cursive;
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 100vh;
    flex-direction: column;
    background-color: #ffcd00;
    perspective: 2500px;
}

h1,
h2 {
    margin: 0;
    padding: 0;
    position: relative;
}

h1 {
    font-size: 10rem;
    color: #fff;
    transform: rotate3d(0, 1, 0, -20deg);
    animation: 5s rotate ease-in-out infinite;
}

h2 {
    font-size: 5rem;
    color: #fff;
    letter-spacing: -4px;
    animation: 2.5s not-found ease-in-out infinite;
}

h1::before,
h1::after {
    content: "404";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
}

h2::before,
h2::after {
    content: "Not Found";
    position: absolute;
    top: 0; 
    left: 0;
    z-index: -1;
}

h1::before {
    color: #009cde;
    animation: 5s offset-1 ease-in-out infinite;
}

h1::after {
    color: #003c71;
    animation: 5s offset-2 ease-in-out infinite;
}

h2::before {
    color: #009cde;
    animation: 2.5 offset-3 ease-in-out infinite;
}

h2::after {
    color: #009cde;
    animation: 2.5 offset-4 ease-in-out infinite;
}

img {
    margin-top: 60px;
    width: 100px;
}

@keyframes offset-1 {

    0%,
    100% {
        transform: translate3d(15px, 5px, -10px);
    }

    50% {
        transform: translate3d(-15px, 5px, -10px);
    }
}

@keyframes offset-2 {

    0%,
    100% {
        transform: translate3d(30px, 10px, -20px);
    }

    50% {
        transform: translate3d(-30px, 10px, -20px);
    }
}

@keyframes offset-3 {

    0%,
    100% {
        transform: translate3d(0px, 6px, -10px);
    }

    50% {
        transform: translate3d(0px, -3px, -10px);
    }
}

@keyframes offset-4 {

    0%,
    100% {
        transform: translate3d(0px, 12px, -20px);
    }

    50% {
        transform: translate3d(0px, -6px, -20px);
    }
}

@keyframes rotate {

    0%,
    100% {
        transform: rotate3d(0, 1, 0, -20deg);
    }

    50% {
        transform: rotate3d(0, 1, 0, 20deg);
    }
}


@keyframes not-found {

    0%,
    100% {
        transform: rotate3d(1, 0, 0, -10deg);
    }

    50% {
        transform: rotate3d(1, 0, 0, 10deg);
    }
}